<template>
<view>
<!--pages/topicality/chuxingtraffic/chuxingtraffic.wxml-->

<view class="body">
  <image class="bg-img" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209102146_29995.jpg"></image>
  <view class="select-border flex align-center between">
    <choose-city @chooseCity="chooseCity">
      <view class="select flex align-center just-center">
        <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209102412_45584.png" class="location" alt>
        </image>
        <view name="city" id="city">{{city}}</view>
        <image src="/static/images/dwicon.png" class="select-icon" alt></image>
      </view>
    </choose-city>
    <view :class="'level ' + classLv">{{cityLv}}</view>
    <!-- <view class="level middle">中风险</view>
            <view class="level height">高风险</view> -->
  </view>
  <view class="content">
    <view class="content-border" v-if="differentTitle.length!=0 && differentContent.length!=0">
      <view class="border-title">异地出行</view>
      <view class="border-content">
        <view class="tab-bar flex">
          <view v-for="(item, index) in differentTitle" :key="index" :class="'bar-item ' + (index==curDiffIndex? 'chouse':'')" @tap="chooseDiffTab" :data-index="index">{{item}}</view>
        </view>
        <view class="border-detail">
          <view v-for="(question, index) in differentContent[curDiffTitle]" :key="index" class="questions-list" v-if="index<maxLength">
            <view class="question-item">
              <view class="item-title flex align-center">
                <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/10/20210210170418_69054.png" alt></image>
                <!-- tools可以自定义 -->
                <view class="intro">
                  <block v-for="(item, index2) in tools.split(question['标题'])" :key="index2">
                    <text :class="' ' + (tools.turnRed(ckey, item, index, question['标题']) ? 'active' : '')">{{item}}</text>
                  </block>
                </view>
              </view>
              <view class="itme-detail">
                <p>{{question['描述']||'...'}}</p>
                <a @tap="articleDetail" :data-key="question.arr">查看原文></a>
              </view>
            </view>
          </view>
          <view class="more" @tap="more" v-if="!hideMoreBtn&&differentContent[curDiffTitle].length>=3">
            <span>查看更多</span>
            <image src="http://imgbdb3.bendibao.com/whbdb/20212/3/20210203160031_83439.png" class="arrow-down" alt>
            </image>
          </view>
        </view>
      </view>
    </view>
    <view class="content-border" v-if="localTitle.length!=0&&localContent.length!=0">
      <view class="border-title">本地出行/居家</view>
      <view class="border-content">
        <view class="tab-bar flex">
          <view v-for="(item, index) in localTitle" :key="index" :class="'bar-item ' + (index==curLocalIndex? 'chouse':'')" @tap="chooseLocalTab" :data-index="index">{{item}}</view>
        </view>
        <view class="border-detail">
          <view v-for="(question, index) in localContent[curLocalTitle]" :key="index" class="questions-list">
            <view class="question-item">
              <view class="item-title flex align-center">
                <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/10/20210210170418_69054.png" alt></image>
                <p>{{question['标题']}}</p>
              </view>
              <view class="itme-detail">
                <rich-text :nodes="question['描述']"></rich-text>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view class="fgx"></view>
    <fangyi-tools id="fangyiTools"></fangyi-tools>
    <!-- 轮播图 -->
    <swiper class="banner-content" indicator-dots autoplay v-if="bannerArr.length!=0">
      <swiper-item v-for="(item, index) in bannerArr" :key="index">
        <image class="banner" :src="item.img" :data-path="item.href" @tap="toBannerDetail">
        </image>
      </swiper-item>
    </swiper>
    <view class="fgx"></view>
    <!-- 导粉 -->
    <view class="daofen" v-if="daofen">
      <rich-text :nodes="daofen" style="user-select:text;-webkit-user-select:text">
      </rich-text>
    </view>
  </view>
</view>
<!-- 底部按钮 -->
<fixed-btn :city="city" :path="'/pages/index/index?city=' + cityCode">
    <text slot="left">查看更多</text><text slot="right">本地资讯</text>
  </fixed-btn>
</view>
</template>

<script module="tools" lang="wxs" src="../../../wxs/keyword.wxs"></script>

<script>
// pages/topicality/chuxingtraffic/chuxingtraffic.js
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import chooseCity from "../../../component/chooseCity/chooseCity";
import fangyiTools from "../../../component/fangyiTools/fangyiTools";
import fixedBtn from "../../../component/fixedBtn/fixedBtn";

export default {
  data() {
    return {
      city: '深圳',
      cityCode: 'sz',
      cityLv: '低风险',
      classLv: 'low',
      differentTitle: [],
      //异地出行title数组
      differentContent: {},
      //异地出行内容
      curDiffIndex: 0,
      curDiffTitle: '',
      localTitle: [],
      //本地出行title数组
      localContent: {},
      //本地出行title数组
      curLocalIndex: 0,
      curLocalTitle: '',
      daofen: '',
      bannerArr: [],
      ckey: ['进', '出', '入', '回', '离', '到', '来', '返', '去'],
      //标红关键字
      maxLength: 3,
      //最多显示几条
      hideMoreBtn: false //隐藏more btn
      ,
      showModalStatus: false,
      openShare: false
    };
  },

  components: {
    chooseCity,
    fangyiTools,
    fixedBtn
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(e => {
      this.getLocation();
      this.renderContent(this.cityCode);
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '出行交通政策查询'
    };
  },
  methods: {
    // 确定选择城市
    chooseCity(e) {
      this.setData({
        city: e.detail.city,
        cityCode: e.detail.cityCode
      });
      this.renderContent(this.cityCode);
    },

    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;

          if (city && !city.includes(this.city)) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '出行交通查询？',
              success: async res => {
                if (res.confirm) {
                  city = city.substr(0, city.length - 1);
                  const cityCode = await this.getCityCode(city);
                  this.setData({
                    city,
                    cityCode
                  });
                  this.renderContent(this.cityCode);
                }
              }
            });
          }
        }
      });
    },

    // 获取cityCode,参数为市
    async getCityCode(city) {
      const res = await util.request("citycode.php", {
        action: "city",
        city: city
      }, "POST");
      return res.data.data[0].citycode;
    },

    // 更多按钮
    more() {
      this.setData({
        maxLength: 100,
        hideMoreBtn: true
      });
    },

    // 风险等级
    renderLv(cityCode) {
      util.request('zhuanti.php', {
        action: 'fengxiandengji',
        citycode: cityCode || this.cityCode
      }, "POST").then(e => {
        this.setData({
          cityLv: e.data.data.dengji.level,
          classLv: e.data.data.dengji.word
        });
      });
    },

    // 渲染内容
    renderContent(cityCode) {
      util.request('zhuanti.php', {
        action: 'jinchuzhengce',
        citycode: cityCode || this.cityCode
      }, 'POST').then(e => {
        this.renderLv(cityCode);
        this.getBanners(cityCode);
        this.selectComponent("#fangyiTools").getTools(cityCode);
        this.setData({
          differentContent: e.data.data.yidi.list || [],
          differentTitle: e.data.data.yidi.title || [],
          curDiffTitle: e.data.data.yidi.title[0] || 0,
          localContent: e.data.data.bendi.list || [],
          localTitle: e.data.data.bendi.title || [],
          curLocalTitle: e.data.data.bendi.title[0] || 0,
          daofen: e.data.data.daofen.content || ''
        });
      });
    },

    // 异地出行选择tab
    chooseDiffTab(e) {
      if (this.curDiffIndex == e.currentTarget.dataset.index) {
        return;
      }

      this.setData({
        curDiffIndex: e.currentTarget.dataset.index,
        curDiffTitle: this.differentTitle[e.currentTarget.dataset.index],
        hideMoreBtn: false,
        maxLength: 3
      });
    },

    // 本地出行选择tab
    chooseLocalTab(e) {
      if (this.curLocalIndex == e.currentTarget.dataset.index) {
        return;
      }

      this.setData({
        curLocalIndex: e.currentTarget.dataset.index,
        curLocalTitle: this.localTitle[e.currentTarget.dataset.index]
      });
    },

    // 分享按钮
    shareBtn(e) {
      this.setData({
        showModalStatus: true,
        openShare: false
      });
    },

    openShare() {
      this.setData({
        openShare: true
      });
    },

    closeShare() {
      this.setData({
        openShare: false
      });
    },

    // 跳转主页
    toHome() {
      uni.reLaunch({
        url: '/pages/index/index?city=' + this.cityCode
      });
    },

    // 文章跳转
    articleDetail(e) {
      let data = util.getValue("key", e);

      if (data) {
        if (data.id) uni.navigateTo({
          url: `/pages/article/detail/detail?id=${data.id}&city=${data.citycode}&type=${data.type}`
        });else {
          util.navContact(this.detailInfo.title, data.url);
        }
      }
    },

    // 获取轮播banner
    getBanners(citycode) {
      util.request('citycode.php', {
        action: 'lunbo',
        citycode: citycode || this.citycode
      }, 'POST').then(e => {
        this.setData({
          bannerArr: e.data.data
        });
      });
    },

    //banner详情
    toBannerDetail(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid || '';

      if (path) {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
          util.navContact(linkname, path);
        } else {
          util.navMethod(path, appid);
        }
      } else {
        uni.showToast({
          title: '还没有这个入口哦~',
          icon: 'none'
        });
      }
    }

  }
};
</script>
<style>
/* pages/topicality/chuxingtraffic/chuxingtraffic.wxss */

.body {

  padding-bottom: 50rpx;
  font-size: 27rpx;
  background-color: rgb(246, 246, 246);
}

.bg-img {

  width: 100%;
  height: 292rpx;
}

.select-border {
  width: 700rpx;
  box-sizing: border-box;
  position: relative;
  top: -50rpx;
  margin: 0 auto;
  padding: 47rpx 61rpx;
  background-color: #ffffff;
  border-radius: 22rpx;
  justify-content: space-between;
}

.location {
  width: 28rpx;
  height: 38rpx;
  margin-right: 26rpx;
}

.select-icon {
  width: 16rpx;
  margin-left: 25rpx;
  height: 11rpx;
}
#city{
  font-size: 36rpx;
}


.level {
  min-width: 150rpx;
  height: 50rpx;
  padding: 0 39rpx;
  font-size: 24rpx;
  line-height: 50rpx;
  text-align: center;
  border-radius: 25rpx;
  border: 2rpx solid;
}

.low {
  color: #2FBD51;
  border-color: #4CC141;
}

.middle {
  color: #4B98F8;
  border-color: #4B98F8;
}

.height {
  color: #FC3838;
  border-color: #FC3838;
}

/* .content {
  margin: 0 27rpx;
} */

.content-border {
  margin: 0 27rpx;
}

.border-title {
  margin-bottom: 34rpx;
  font-size: 31rpx;
  color: #999999;
}

.border-content {
  margin-bottom: 34rpx;
  padding: 28rpx 25rpx;
  background-color: #FFFFFF;
  border-radius: 22rpx;
}

.tab-bar {
  margin-bottom: 48rpx;
  overflow-x: scroll;
}

.bar-item {
  height: 75rpx;
  min-width: 143rpx;
  margin-right: 12rpx;
  line-height: 75rpx;
  font-size: 29rpx;
  text-align: center;
  background-color: #F9FBFC;
  border-radius: 18rpx;
}

.chouse {
  height: 84rpx;
  line-height: 84rpx;
  color: #FFFFFF;
  background-color: #FFFFFF;
  background-image: url("http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209104131_39076.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.question-item {
  margin-bottom: 37rpx;
}

.item-title {
  margin-bottom: 25rpx;
  font-size: 33rpx;
  font-weight: 700;
}

.item-title image {
  display: inline-block;
  width: 37rpx;
  height: 37rpx;
  margin-right: 19rpx;
}

.itme-detail {
  padding-left: 27rpx;
  padding-bottom: 31rpx;
  overflow: hidden;
  background-color: #F9FBFC;
  border-radius: 18rpx;
}

.itme-detail a {
  color: #3887D9;
}

.itme-detail p {
  display: -webkit-box;
  margin: 26rpx 27rpx;
  margin-left: 0;
  margin-bottom: 29rpx;
  font-size: 27rpx;
  line-height: 45rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: pre-wrap;
}

.yiqing-tools {
  margin: 20rpx 27rpx !important;
}

.more {
  height: 75rpx;
  margin-top: 25rpx;
  line-height: 75rpx;
  font-size: 27rpx;
  border-radius: 37rpx;
  text-align: center;
  background-color: #F0EEF2;
}

.arrow-down {
  width: 24rpx;
  height: 13rpx;
  margin-left: 19rpx;
}

.back_to_feed {
  display: none !important;
}

.active {
  color: red;
}

.light-in {
  color: blue;
}
/* 底部fixed */
.fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: auto;
	background: #fff;
	padding: 10rpx 0;

}

.share {
	width: 35%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 56rpx;
	color: #ffffff;
	font-weight: 500;
	background-color: #5395DE;
	margin-left: 20rpx;
}

.share view {
	display: flex;
	justify-content: center;
	align-items: center;
}

.share-icon {
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
}

.other-city {
	width: 65%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border: 0;
	border-radius: 56rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-top: 10rpx;
	color: #ffffff;
	background: #5395DE;
}
.bottom-mask {
  position: fixed;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, .4);
}

.bottom-share-box {
  position: fixed;
  bottom: 0;
  height: 380rpx;
  width: 100%;
  justify-content: space-between;
  padding-top: 80rpx;
  background-color: rgb(251, 253, 250);
  border-top-left-radius: 54rpx;
  border-top-right-radius: 54rpx;
  overflow-x: hidden;
  z-index: 999999;
}

.bottom-share-box .flex {
  padding: 20rpx 20%;
  z-index: 99;
  box-sizing: border-box;
}

.bottom-share-box .share-box-img {
  width: 100rpx;
  margin-bottom: 16rpx;
}

.bottom-share-box .share-box-path {
  font-size: 24rpx;
}

.bottom-share-box .flex {
  width: 100%;
}

.line {
  height: 60rpx;
  border-right: 2rpx solid #ccc;
}

.cancel {
  width: 100%;
  height: 102rpx;
  margin-top: 30rpx;
  line-height: 102rpx;
  font-size: 34rpx;
  text-align: center;
  background-color: #FFFFFF;
}

button {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.share-box {
  margin-bottom: 60rpx;
  margin-top: 40rpx;
}

.share-box-img {
  width: 100rpx;
  height: 100rpx;
}

.shar-box-item {
  line-height: normal;
}

.share-box-title {
  width: 100%;
  margin-bottom: 58rpx;
  font-size: 32rpx;
  color: #BFBFBF;
  text-align: center;
}

.share-box-path {
  font-size: 22rpx;
  color: #141414;
}

.shar-box-list {
  width: 70%;
}
/* 导粉 */

.daofen {
  margin-bottom: 80rpx;
  text-align: center;
}
/* 轮播图 */
.banner-content{
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 50rpx;
  width: 720rpx;
}
.banner{
  width: 720rpx;
  height: 250rpx;
  border-radius: 20rpx;
}

</style>